<template>
  <div class="map-wrap">
    <div class="map" id="map" ref="mapContainer"></div>
  </div>
</template>

<script setup>
import { Map, MapStyle, Marker, config } from '@maptiler/sdk'
import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue'
import '@maptiler/sdk/dist/maptiler-sdk.css'
import mapboxgl from 'mapbox-gl'
const mapContainer = shallowRef(null)
const map = shallowRef(null)

const init = () => {
  mapboxgl.accessToken = 'pk.eyJ1IjoiemhvdXlvbmciLCJhIjoiY2pyMWdoemtqMDZ3bzQzcG1vbmsyeXY1NiJ9.dDRra6VqXb4wLu83470Mvg'
  const map = new mapboxgl.Map({
    container: 'map',
    // style: "mapbox://styles/mapbox/streets-v11",
    style: 'http://10.101.10.77:7778/styles/klokantech-basic/style.json',
    // 广州市
    center: [113.480062, 22.806028],
    zoom: 10,
    minZoom: 9,
    maxZoom: 20,
    fadeDuration: 100,
    antialias: true
  })
  const data = [['12607475', '2645220.3'], ['12607475.41', '2645179.09'], ['12607554.61', '2645180.73'], ['12607555.11', '2645202.58']]

  map.on('load', () => {
    console.log('load')
    map.addLayer({
      id: 'route-layer',
      type: 'line',
      source: {
        type: 'geojson',
        data: {
          type: 'Feature',
          geometry: {
            type: 'LineString',
            coordinates: data
          }
        }
      },
      layout: {
        lineColor: '#ff0000', // 线路的颜色，例如红色为 #ff0000
        lineWidth: 20 // 线的宽度，单位为像素
      }
    })
  })
}
const init01 = () => {
  mapboxgl.accessToken = 'pk.eyJ1IjoiemhvdXlvbmciLCJhIjoiY2pyMWdoemtqMDZ3bzQzcG1vbmsyeXY1NiJ9.dDRra6VqXb4wLu83470Mvg'
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [-122.486052, 37.830348],
    zoom: 14
  })
  map.on('load', () => {
    map.addSource('route', {
      type: 'geojson',
      data: {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [
            [-122.483696, 37.833818],
            [-122.483482, 37.833174],
            [-122.483396, 37.8327],
            [-122.483568, 37.832056],
            [-122.48404, 37.831141],
            [-122.48404, 37.830497],
            [-122.483482, 37.82992],
            [-122.483568, 37.829548],
            [-122.48507, 37.829446],
            [-122.4861, 37.828802],
            [-122.486958, 37.82931],
            [-122.487001, 37.830802],
            [-122.487516, 37.831683],
            [-122.488031, 37.832158],
            [-122.488889, 37.832971],
            [-122.489876, 37.832632],
            [-122.490434, 37.832937],
            [-122.49125, 37.832429],
            [-122.491636, 37.832564],
            [-122.492237, 37.833378],
            [-122.493782, 37.833683]
          ]
        }
      }
    })
    map.addLayer({
      id: 'route',
      type: 'line',
      source: 'route',
      layout: {
        'line-join': 'round',
        'line-cap': 'round'
      },
      paint: {
        'line-color': '#888',
        'line-width': 8
      }
    })
  })
}
// function init01 () {
//   // config.apiKey = 'c2mLJl2eLDKNKCd2HBZi'
//   config.apiKey = 'c2mLJl2eLDKNKCd2HBZi'
//
//   const initialState = {
//     lng: 104.07642066478729,
//     lat: 30.4049339096274,
//     zoom: 14
//   }
//
//   map.value = markRaw(new Map({
//     container: mapContainer.value,
//     style: MapStyle.STREETS,
//     center: [initialState.lng, initialState.lat],
//     zoom: initialState.zoom
//   }))
//
//   new Marker({ color: '#00ff66' })
//     .setLngLat([104.07642066478729, 30.4049339096274])
//     .addTo(map.value)
// }
onMounted(() => {
  init01()
})
onUnmounted(() => {
  console.log(mapboxgl)
  map.value?.remove()
})
</script>

<style scoped>
.map-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 77px); /* calculate height of the screen minus the heading */
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
